<h1>Table Variations</h1>

<p>While Trongate CSS provides excellent default table styling, you may want to customize tables for specific use cases. This guide explores various ways to modify table appearance and behavior.</p>

<h2>Compact Tables</h2>
<p>You can create more compact tables by adjusting cell padding using custom CSS:</p>

<div class="trongate-css-demo">
    <div>
        <table class="compact-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>Active</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Smith</td>
                    <td>Pending</td>
                </tr>
            </tbody>
        </table>

        <style>
            .compact-table th,
            .compact-table td {
                padding: 0.3em;
            }
        </style>
    </div>
</div>

[code=html]
&lt;table class="compact-table"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;John Doe&lt;/td&gt;
            &lt;td&gt;Active&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- More rows... --&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;style&gt;
.compact-table th,
.compact-table td {
    padding: 0.3em;
}
&lt;/style&gt;
[/code]
<hr>
<h2 class="mt-3">Custom Header Colors</h2>
<p>You can modify table header colors using CSS variables or direct color values:</p>

<div class="trongate-css-demo">
    <div>
        <table class="custom-header">
            <thead>
                <tr>
                    <th>Package</th>
                    <th>Price</th>
                    <th>Features</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Basic</td>
                    <td>$19.99</td>
                    <td>Essential features</td>
                </tr>
                <tr>
                    <td>Pro</td>
                    <td>$49.99</td>
                    <td>Advanced features</td>
                </tr>
            </tbody>
        </table>

        <style>
            .custom-header th {
                background-color: var(--secondary);
                border-color: var(--secondary-dark);
            }
        </style>
    </div>
</div>

[code=html]
&lt;table class="custom-header"&gt;
    &lt;!-- Table content... --&gt;
&lt;/table&gt;

&lt;style&gt;
.custom-header th {
    background-color: var(--secondary);
    border-color: var(--secondary-dark);
}
&lt;/style&gt;
[/code]

<div class="alert alert-success">
    <p>Remember that while customizing tables, it's important to maintain good contrast ratios for accessibility. Test your custom styles with different color combinations to ensure readability.</p>
</div>

<hr>
<h2 class="mt-3">Highlighted Rows</h2>
<p>You can highlight specific rows for emphasis using custom classes:</p>

<div class="trongate-css-demo">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Plan</th>
                    <th>Users</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Basic</td>
                    <td>5 users</td>
                    <td>$29/mo</td>
                </tr>
                <tr class="highlight-row">
                    <td>Professional</td>
                    <td>25 users</td>
                    <td>$99/mo</td>
                </tr>
                <tr>
                    <td>Enterprise</td>
                    <td>Unlimited</td>
                    <td>$299/mo</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
tr.highlight-row {
    background-color: yellow;
}
</style>

[code=html]
&lt;tr class="highlight-row"&gt;
    &lt;td&gt;Professional&lt;/td&gt;
    &lt;td&gt;25 users&lt;/td&gt;
    &lt;td&gt;$99/mo&lt;/td&gt;
&lt;/tr&gt;

&lt;style&gt;
tr.highlight-row {
    background-color: yellow;
}
&lt;/style&gt;
[/code]

<hr>
<h2 class="mt-3">Responsive Tables</h2>
<p>For better mobile display, wrap your table in a container with horizontal scroll:</p>

<div class="trongate-css-demo">
    <div>
        <div class="table-responsive">
            <style>
                .table-responsive {
                    overflow-x: auto;
                    margin: 1em 0;
                }
            </style>
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Rating</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Premium Laptop</td>
                        <td>Electronics</td>
                        <td>$1,299.99</td>
                        <td>45</td>
                        <td>4.5/5</td>
                        <td>Edit | Delete</td>
                    </tr>
                    <tr>
                        <td>Wireless Mouse</td>
                        <td>Accessories</td>
                        <td>$49.99</td>
                        <td>132</td>
                        <td>4.8/5</td>
                        <td>Edit | Delete</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

[code=html]
&lt;div class="table-responsive"&gt;
    &lt;table&gt;
        &lt;!-- Table content... --&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;style&gt;
.table-responsive {
    overflow-x: auto;
    margin: 1em 0;
}
&lt;/style&gt;
[/code]
<hr>
<h2 class="mt-3">Custom Cell Alignment</h2>
<p>You can align cell content using text alignment classes:</p>

<div class="trongate-css-demo">
    <div>
        <table>
            <thead>
                <tr>
                    <th class="text-left">Product</th>
                    <th class="text-center">Quantity</th>
                    <th class="text-right">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-left">Premium Widget</td>
                    <td class="text-center">5</td>
                    <td class="text-right">$99.99</td>
                </tr>
                <tr>
                    <td class="text-left">Basic Widget</td>
                    <td class="text-center">3</td>
                    <td class="text-right">$49.99</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

[code=html]
&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class="text-left"&gt;Product&lt;/th&gt;
            &lt;th class="text-center"&gt;Quantity&lt;/th&gt;
            &lt;th class="text-right"&gt;Price&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class="text-left"&gt;Premium Widget&lt;/td&gt;
            &lt;td class="text-center"&gt;5&lt;/td&gt;
            &lt;td class="text-right"&gt;$99.99&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- More rows... --&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
[/code]
<hr>
<h2 class="mt-3">Status-Based Row Colors</h2>
<p>Inside of defining a brand new color/class for table rows, you can also access pre-existing <a href="documentation/display/trongate_css/css-fundamentals/css-variables">CSS variables</a> to create status-based row colors.  This technique guarantees that your table row styling is kept in alignment with underlying CSS variables.  For example:</p>

<div class="trongate-css-demo">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Customer</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr class="status-row-success">
                    <td>001</td>
                    <td>John Doe</td>
                    <td>Completed</td>
                </tr>
                <tr class="status-row-warning">
                    <td>002</td>
                    <td>Jane Smith</td>
                    <td>Pending</td>
                </tr>
                <tr class="status-row-danger">
                    <td>003</td>
                    <td>Bob Wilson</td>
                    <td>Cancelled</td>
                </tr>
            </tbody>
        </table>

        <style>
        tr.status-row-success {
            background-color: color-mix(in srgb, var(--success) 10%, transparent);
        }
        tr.status-row-warning {
            background-color: color-mix(in srgb, var(--warning) 10%, transparent);
        }
        tr.status-row-danger {
            background-color: color-mix(in srgb, var(--danger) 10%, transparent);
        }
        </style>
    </div>
</div>

[code=html]
&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Order ID&lt;/th&gt;
            &lt;th&gt;Customer&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr class="status-row-success"&gt;
            &lt;td&gt;001&lt;/td&gt;
            &lt;td&gt;John Doe&lt;/td&gt;
            &lt;td&gt;Completed&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="status-row-warning"&gt;
            &lt;td&gt;002&lt;/td&gt;
            &lt;td&gt;Jane Smith&lt;/td&gt;
            &lt;td&gt;Pending&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="status-row-danger"&gt;
            &lt;td&gt;003&lt;/td&gt;
            &lt;td&gt;Bob Wilson&lt;/td&gt;
            &lt;td&gt;Cancelled&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;style&gt;
tr.status-row-success {
    background-color: color-mix(in srgb, var(--success) 10%, transparent);
}
tr.status-row-warning {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent);
}
tr.status-row-danger {
    background-color: color-mix(in srgb, var(--danger) 10%, transparent);
}
&lt;/style&gt;
[/code]

<div class="alert alert-info">
    <h3>What is <b>color-mix()</b>?</h3>
    <p>The <code>color-mix()</code> function in CSS lets you blend two colours together to create new ones. It's a simple way to create effects like transparent overlays, gradients, and custom colour combinations dynamically.</p>

    <h4>How Does It Work?</h4>
    <p>The function combines two colours in a specified colour space. Here's the syntax:</p>
    [code=css]
color-mix(in &lt;color-space&gt;, &lt;color1&gt; &lt;percentage&gt;, &lt;color2&gt;);
[/code]

    <h4>Example Use Case</h4>
    <p>Here's how you can blend 10% of your primary colour with transparency:</p>
    [code=css]
background-color: color-mix(in srgb, var(--primary) 10%, transparent);
[/code]

<h4>Understanding sRBG</h4>
<p>The 'srgb' value in the color-mix() function refers to the sRGB (Standard RGB) colour space, which is a commonly used colour space for web and digital design.  <b>sRGB</b> defines how colours are represented and rendered on screens. It is the default colour space for most web content and displays.</p>

    <h4>Browser Support and Fallback</h4>
    <p>Modern browsers support <code>color-mix()</code>. To ensure compatibility with older browsers, provide a fallback:</p>
    [code=css]
background-color: var(--primary); /* Fallback */
background-color: color-mix(in srgb, var(--primary) 10%, transparent);
[/code]

    <h4>Pro Tips</h4>
    <ul>
      <li>Adjust percentages to fine-tune blending effects.</li>
      <li>Combine with CSS variables to maintain consistent theming.</li>
      <li>Use it for hover effects, overlays, and accent colours in your designs.</li>
    </ul>
</div>




<hr>
<h2 class="mt-3">Advanced Customization Tips</h2>
<ul>
    <li>Use CSS variables for consistent color theming across tables</li>
    <li>Consider using <code>max-height</code> with <code>overflow-y: auto</code> for scrollable table bodies</li>
    <li>Add <code>white-space: nowrap</code> to prevent content wrapping in specific cells</li>
    <li>Use <code>width</code> or <code>min-width</code> on columns to control their sizing</li>
    <li>Consider using the container classes (e.g., <code>container-sm</code>) to control table width</li>
</ul>